<template>
  <div id="breadcrumb" class="flex align-items-center">
    <svg-icon
      v-if="invisibleSidebar"
      icon-name="sprite_icons_unstaged"
      class-name="s24 pointer"
      @click.native="toggleSidebar"
    />
    <ws-breadcrumb :breadcrumb="breadcrumb" separator-class="el-icon-arrow-right" />
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import WsBreadcrumb from '@/components/shared/ws/ws-breadcrumb';

export default {
  name: 'ResourcesBreadcrumb', // 资源区(show)的面包屑导航
  components: { WsBreadcrumb },
  computed: {
    ...mapState({
      curSpace: 'currentSpace',
      curDoc: 'currentDocument',
      sidebarCollapsed: 'sidebarCollapsed',
      invisibleSidebar: 'invisibleSidebar',
    }),
    breadcrumb() {
      const baseUrl = `/spaces/${this.curSpace.id}`;
      let baseBreadcrumb = [
        { label: this.curSpace.title, path: baseUrl },
        { label: '资源区', path: `${baseUrl}/resources` },
      ];
      if (this.curDoc.id) {
        const parent = this.curDoc.parentPath || '';
        const idTitles = parent.split('/').filter(i => i);
        const objs = idTitles.map(str => ({
          id: str.substring(0, str.indexOf('-')),
          title: str.substring(str.indexOf('-') + 1),
        }));
        const labelPath = objs.map(obj => ({
          label: obj.title,
          path: `${baseUrl}/resources/${obj.id}`,
        }));
        baseBreadcrumb = baseBreadcrumb.concat(labelPath);

        if (this.curDoc.type === 'ProductSnippet') {
          baseBreadcrumb = baseBreadcrumb.concat([{
            label: this.curDoc.title,
            path: `${baseUrl}/resources-docs/${this.curDoc.id}`,
          }]);
        } else if (this.curDoc.type === 'ProductLocalFile') {
          baseBreadcrumb = baseBreadcrumb.concat([{
            label: this.curDoc.title,
            path: `${baseUrl}/resources-uploads/${this.curDoc.id}`,
          }]);
        }
      }
      return baseBreadcrumb;
    },
  },
  methods: {
    ...mapActions({
      setSidebarCollapsed: 'setSidebarCollapsed',
    }),
    // 小屏幕下的打开侧边栏
    toggleSidebar() { this.setSidebarCollapsed(!this.sidebarCollapsed); },
  },
};
</script>

<style></style>
